<template>
	<div class="content">
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>1、是否有直播经验？</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':is_live_experience == 1}" @click="is_live_experience = 1">是</span>
				<span class="label" :class="{'current':is_live_experience == 0}" @click="is_live_experience = 0">否</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>2、是否有自媒体？</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':is_media == 1}" @click="is_media = 1">有</span>
				<span class="label" :class="{'current':is_media == 0}" @click="is_media = 0">无</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>3、主播类型</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':anchor_type == 0}" @click="anchor_type = 0">游戏主播</span>
				<span class="label" :class="{'current':anchor_type == 1}" @click="anchor_type = 1">娱乐主播</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>4、全职or兼职</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':is_full_time == 0}" @click="is_full_time = 0">全职</span>
				<span class="label" :class="{'current':is_full_time == 1}" @click="is_full_time = 1">兼职</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>5、姓名（昵称）</span>
			</div>
			<div class="cons">
				<input class="input" type="text" v-model="nickname" placeholder-class="input-holder" placeholder="请输入">
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>6、性别</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':sex == 0}" @click="sex = 0">男</span>
				<span class="label" :class="{'current':sex == 1}" @click="sex = 1">女</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>7、手机号</span>
			</div>
			<div class="cons">
				<input class="input" type="text" v-model="phone" placeholder-class="input-holder" placeholder="请输入">
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>8、微信号</span>
			</div>
			<div class="cons">
				<input class="input" v-model="wechat_num" type="text" placeholder-class="input-holder" placeholder="请输入">
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>9、意向直播平台</span>
			</div>
			<div class="cons">
				<span class="label" :class="{'current':live_platform == 0}" @click="live_platform = 0">斗鱼</span>
				<span class="label" :class="{'current':live_platform == 1}" @click="live_platform = 1">抖音</span>
			</div>
		</div>
		<div class="panel">
			<div class="title">
				<span class="red">*</span>
				<span>10、简述个人情况</span>
			</div>
			<div class="desc">简单进行一下自我介绍</div>
			<div class="cons">
				<textarea class="input area-input" v-model="info" type="text" placeholder-class="input-holder" placeholder="请输入"/>
			</div>
		</div>
		<div class="submit-btn" @click="submitFrom">提交</div>
		<div class="tank" v-if="visible">
			<div class="tank-content">
				<img class="success" src="@/static/suceess.png" alt="">
				<div class="success-text">填写完成，已生成入会链接</div>
				<div class="group-btn">
					<div class="ok later" @click="ev_later">稍后查看</div>
					<div class="ok">立即查看</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import request from '../../utils/request'

	export default {
		data() {
			return {
				visible:true,
				is_live_experience: 1,//直播经验
				is_media:1,//自媒体经验
				anchor_type:0,
				is_full_time:0,
				nickname:'',
				sex:0,
				phone:'',
				wechat_num:'',
				live_platform:0,
				info:''
			}
		},
		onLoad() {

		},
		methods: {
			ev_later(){
				this.visible = false
				uni.switchTab({
					url: '/pages/home/index'
				});
			},
			async submitFrom(){
				const {
					is_live_experience,
					is_media,
					anchor_type,
					is_full_time,
					nickname,
					sex,
					phone,
					wechat_num,
					live_platform,
					info
				} = this

				const dataParmes = {is_live_experience,
					is_media,
					anchor_type,
					is_full_time,
					nickname,
					sex,
					phone,
					wechat_num,
					live_platform,
					info,
					game_id:1,
					grade_id:4
				}
				await request('api/index/userInfoAdd', 'post', dataParmes);
				this.visible = true
				
			},

		}
	}
</script>

<style lang="scss" scoped>
.tank {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba($color: #09101D, $alpha: 0.7);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9;
		.tank-content {
			width: 265px;
			height: 375px;
			padding: 40px;
			background: #FFFFFF;
			border-radius: 30px 30px 30px 30px;
			display: flex;
			flex-direction: column;
			align-items: center;
			.success {
				width: 190px;
				height: 185px;
				display: block;
			}
			.success-text {
				font-size: 20px;
				color: #000000;
				margin-top: 32px;
			}
			.group-btn {
				display: flex;
				justify-content: center;
			}
			.ok {
				width: 120px;
				margin: 0 10px;
				height: 40px;
				background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
				border-radius: 100px 100px 100px 100px;
				border: 2px solid #000000;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 40px;
			}
			.later {
				background: #FFF1F1;
				border-color: #FFF1F1;
				color: #000000;
			}
		}
	}
	.content {
		display: flex;
		flex-direction: column;
		background: linear-gradient( 180deg, #FFDCDD 0%, #FFFFFF 10%);
		border-radius: 28px 28px 0px 0px;
		padding: 18px 15px;
		.panel {
			margin-top: 20px;
			.title {
				font-size: 14px;
				color: #000000;
				.red {
					color: #E25D66;
					margin-right: 10px;
				}
			}
			.cons {
				margin-top: 10px;
				display: flex;
				.input {
					width: 295px;
					height: 36px;
					background: #FFF9F9;
					border-radius: 10px 10px 10px 10px;
					border: 2px solid #000000;
					padding: 0 20px;
				}
				.label {
					padding: 0 40px;
					height: 36px;
					border-radius: 100px 100px 100px 100px;
					border: 2px solid #000000;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20px;
				}
				.current {
					background: #FFADA9;
				}
				.input-holder {
					color: #9E9E9E;
				}
				.area-input {
					height: 100px;
					padding: 20px;
				}
				
			}
			.desc {
					color: #9E9E9E;
					font-size: 12px;
				}
		}
		.submit-btn {
			width: 300px;
			height: 40px;
			background: linear-gradient( 270deg, rgba(222,55,63,0.9) 0%, rgba(255,105,105,0.9) 100%);
			border-radius: 100px 100px 100px 100px;
			border: 2px solid #000000;
			margin:30px auto;
			color: #fff;
			display: flex;
			justify-content: center;
			align-content: center;
			align-items: center;
		}
	}


</style>
